<template>
  <PageWrapper>
    <div class="lg:flex">
      <div class="lg:w-8/10 w-full !mr-4">
        <!-- 标题 -->
        <Banner />
        <!-- 待审批数据 -->
        <ContentChart class="!mt-1" :loading="loading" />
        <div class="2xl:flex w-full">
          <!-- 我参与的项目 -->
          <div class="2xl:w-5/10 w-full">
            <MyProject :loading="loading" />
          </div>
          <!-- 我执行的任务 -->
          <div class="2xl:w-5/10 w-full !ml-2">
            <MyTask :loading="loading" />
          </div>
        </div>
      </div>
      <div class="lg:w-2/10 w-full">
        <!-- 快捷导航 -->
        <QuickNav :loading="loading" />
        <!-- 轮播图 -->
        <Carousel class="!mt-1" />
        <!-- 公告 -->
        <Announcement class="!mt-1" :loading="loading" />
        <!-- 帮助文档 -->
        <Docs class="!mt-1" :loading="loading" />
      </div>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import Banner from './components/Banner.vue';
  import QuickNav from './components/QuickNav.vue';
  import Carousel from './components/Carousel.vue';
  import Announcement from './components/Announcement.vue';
  import Docs from './components/Docs.vue';
  import ContentChart from './components/ContentChart.vue';
  import MyProject from './components/MyProject.vue';
  import MyTask from './components/MyTask.vue';

  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>
